<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="500px"
    class="role-edit"
    :visible="visible"
    :lock-scroll="false"
    v-dialog-movable="false"
    custom-class="ele-dialog-form"
    :title="(isUpdate?'修改' : '添加') + '角色'"
    @update:visible="updateVisible"
    :close-on-click-modal="false">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      :size="defaultFormSize"
      @keyup.enter.native="save"
      @submit.native.prevent>
      <el-form-item label="角色名:" prop="RoleName">
        <el-input clearable v-model="form.RoleName" placeholder="请输入角色名"/>
      </el-form-item>
      <el-form-item label="备注:" prop="RoleDesc">
        <el-input
          clearable
          type="textarea"
          class="role-desc"
          v-model="form.RoleDesc"
          placeholder="请输入角色备注"/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'save-role',
    props: {
      // 弹窗是否打开
      visible: {
        type: Boolean,
        default: false
      },
      // 修改回显的数据
      data: {
        type: Object,
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {
        // 表单数据
        form: this.initFormData(this.data),
        // 表单验证规则
        rules: {
          RoleName: [
            {required: true, message: '请输入角色名', trigger: 'blur'}
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    watch: {
      data() {
        this.isUpdate = !!(this.data && this.data.RoleID);
        this.form = this.initFormData(this.data);
      }
    },
    methods: {
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let data = {
              RoleName: this.form.RoleName,
              RoleDesc: this.form.RoleDesc,
            }
            if (this.isUpdate) {
              data.RoleID = this.form.RoleID
            }
            this.loading = true;
            let requestUrl = this.isUpdate ? '/role/update' : '/role/create';
            this.$http.post(requestUrl, data).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({type: 'success', message: res.data.msg});
                this.updateVisible(false);
                this.$emit('done');
                this.form = this.initFormData({});
              }
            }).catch(() => {
              this.loading = false;
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 初始化form数据 */
      initFormData(data) {
        let form = {};
        if (data) {
          Object.assign(form, data);
          form.IsStaffShow = Number(form.IsStaffShow)
        }
        return form;
      },
    }
  }
</script>
<style lang="scss">
  .role-edit {
    .role-desc, .role-desc textarea {
      height: 100px;
    }
  }
</style>
